<template>
    <div class="pagination">
        <button @click="changePageNo(pageNo-1)" :disabled="pageNo === 1">上一页</button>
    <button   @click="changePageNo(1)" v-show="startEnd.start !== 1">1</button>
    <span v-show="startEnd.start > 2">···</span>
  
     <!-- 连续分页 -->
    <button @click="changePageNo(index + startEnd.start)" :class="{active:pageNo === index + startEnd.start}" v-for="(n,index) in (startEnd.end - startEnd.start + 1)" :key="index">
        {{ index + startEnd.start }} 
    </button>
  
    <span v-show="startEnd.end < totalPage -1">···</span>
    <button  @click="changePageNo(totalPage)" v-show="startEnd.end !== totalPage">{{totalPage}}</button>
    <button @click="changePageNo(pageNo+1)" :disabled="pageNo === totalPage">下一页</button>
  
      <span>共{{total}} 条</span>
    </div>
  </template>
  
  <script>
  export default {
    name: "Pagination",
    props:{
    total:{  //总数
        required:true,
    },
    pageSize:{  //每页展示数量
        type:Number,
        required:true,
    },
    pageNo:{ //当前页码
        type:Number,
        required:true,
    },
    continues:{  //连续页数
        type:Number,
        default:5,
    },
    changePageNo:{
      type:Function,
      required:true
    }
  },
  computed:{
    totalPage(){
        return Math.ceil(this.total/this.pageSize);
    },
     //计算连续分页初始值和结束值
     startEnd(){

let {pageNo,pageSize,continues,totalPage} = this;
// 初识值
let start = 0;
//结束值
let end = 0;
//计算
start = pageNo - (continues-1)/2;
end = pageNo + (continues-1)/2;
if(continues > totalPage){
            start = 1;
            end = totalPage;
        }else{
             //计算
            start = pageNo - (continues-1)/2;
            end = pageNo + (continues-1)/2;
            //计算 不正常情况 连续分页: 当 start  < 1 ;start = 1;  end = continues
            if(start < 1){
                start = 1;
                end = continues;
            }
              // 计算 不正常情况 连续分页: 当 end  > totalPage ;start = totalPage - continues +1;  end = totalPage
              if(end > totalPage){
                start = totalPage - continues + 1;
                end = totalPage;
            }
        }
return {
    start,
    end
}
}
  }
  };
  </script>
  
  <style lang="less" scoped>
  .pagination {
    text-align: center;
  
    button {
      margin: 0 5px;
      background-color: #f4f4f5;
      color: gray;
      outline: none;
      border-radius: 2px;
      padding: 0 4px;
      vertical-align: top;
      display: inline-block;
      font-size: 13px;
      min-width: 35.5px;
      height: 28px;
      line-height: 28px;
      cursor: pointer;
      box-sizing: border-box;
      text-align: center;
      border: 0;
  
      &[disabled] {
        color: #c0c4cc;
        cursor: not-allowed;
      }
  
      &.active {
        cursor: not-allowed;
        background-color: #c81623;
        color: #fff;
      }
    }
  
    span {
      display: inline-block;
      line-height: 28px;
      font-size: 14px;
      color: gray;
      vertical-align: middle;
    }
  }
  </style>